<template>
    <div class="container">
        <div class="detail">
            <div class="title">{{ article.title }}</div>
            <div class="mysub-title">{{ article.createdAt }}</div>

            <div class="mycontent" v-html="article.content"></div>

            <div class="myreadBox">
                <div class="myreadNav flex" v-if="unreadList.length != 0 && readData.length != 0">
                    <div :class="{ 'myreadNav_li_active': active == 0, 'myreadNav_li': active != 0 }"
                        @click="active = 0">已读
                    </div>
                    <div :class="{ 'myreadNav_li_active': active == 1, 'myreadNav_li': active != 1 }"
                        @click="active = 1">未读
                    </div>
                </div>
                <div class="myread_box" v-if="active == 0 && readData.length > 0">
                    <p v-for="(item, index) in readData" :key="index">{{ item.teacherName }} <span
                            v-if="index < readData.length - 1">，</span>
                    </p>
                </div>
                <div class="myread_box" v-if="active == 1 && unreadList.length > 0">
                    <p v-for="(item, index) in unreadList" :key="index">{{ item.teacherName }} <span
                            v-if="index < unreadList.length - 1">，</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bottomView from "@/components/bottom.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";


export default {
    name: "BaseTeacherList",

    data() {
        return {
            messageId: "",
            article: {},
            readData: [],
            unreadList: [],
            active: 0,
        };
    },
    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage,
        bottomView,
    },
    watch: {
    },
    setup() {
        return {
            locale: zhCn,
        }
    },
    mounted() {
        this.messageId = this.$route.query.id
        this.queryNotice();
        this.readhandle();
        this.readList();
    },
    watch: {

    },
    methods: {
        queryNotice() {
            httpService(
                "/javaApi/messages/queryById",
                { id: this.messageId },
                "get"
            ).then((data) => {
                this.article = data;
            });
        },
        readhandle() {
            let params = new FormData()
            params.append('messageId', this.messageId)
            httpService(
                "/javaApi/messageViews/add", params, "post"
            ).then((data) => {
            });
        },
        readList() {
            httpService("/javaApi/messageViews/listAll", { "messageId": this.messageId }, "get").then((data) => {
                if (data) {
                    data.forEach(item => {
                        if (item.viewedAt != null) {
                            this.readData.push(item)
                        } else {
                            this.unreadList.push(item)
                        }
                    });
                }
            });
        },

    },
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    margin-top: 20px;
    width: 100%;
    min-height: calc(100% - 130px);
    padding-bottom: 20px;
}

.detail {
    background-color: #fff;
    padding: 25px 40px 0;
    min-height: calc(100% - 25px);
}

.detail .title {
    font-size: 29px;
    color: #000000;
    text-align: center;
}

.detail .mysub-title {
    font-size: 14px;
    color: #888888;
    margin-top: 80px;
    margin-bottom: 35px;
    text-align: left;
}

.mycontent {
    margin: 0 auto;
    text-align: left;
    color: #333;
    font-size: 18px;
    line-height: 33px;
}

.myreadBox {
    margin-top: 50px;
    transition: all 0.3s;
}

.myreadNav_li {
    width: 50px;
    font-size: 12px;
    color: #666666;
    cursor: pointer;
    text-align: left;
}

.myreadNav_li_active {
    width: 50px;
    font-size: 12px;
    color: #007EFF;
    cursor: pointer;
    text-align: left;
}

.myread_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #F1F3F9;
    padding: 8px 5px;
    margin-top: 15px;
    color: #999999;
    font-size: 12px;
    line-height: 20px;
    transition: all 0.3s;
}
</style>